<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>注册-cloudshop</title>
    <link rel="stylesheet" type="text/css" href="css/register.css">
    <script src="jquery/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="zTree/layer/layer.js"></script>
    <link rel="stylesheet" href="zTree/layer/theme/default/layer.css">
    <script src="javascript/checkInput.js"></script>
</head>
<body>
<div class="htmleaf-container">
    <div class="wrapper">
        <div class="container">
            <h1>孤独, 不一定不快乐.</h1>
            <form class="form">
                <input type="text" id="username" placeholder="用户名">
                <input type="password" id="password" placeholder="密码">
                <input type="text" id="email" placeholder="电子邮件">
                <input type="text" id="phone" placeholder="手机电话">
                <button type="submit" id="register-button">注册</button>
            </form>
        </div>
        <ul class="bg-bubbles">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>


<script>
    $('#register-button').click(function (event) {
        if(!checkRegister($("#username"),$("#password"),$("#email"),$("#phone"))) {
            return false;
        }
        event.preventDefault();
        $('form').fadeOut(500);//使用淡出效果隐藏表单
        $('.wrapper').addClass('form-success');
        $.ajax({
            url: "authentication/register",
            type: "POST",
            data: {
                username:$("#username").val(),
                password: $("#password").val(),
                phone:$("#email").val(),
                email:$("#phone").val()
            },
            dataType: "text",
            success: function (result) {
                if(result==="200"){
                    $('form').fadeOut(500);//使用淡出效果隐藏表单
                    $('.wrapper').addClass('form-success');
                    window.location.href="main";
                }else if(result==="400"){
                    showMessage("用户名已注册",$("#username"));
                } else if(result==="401"){
                    showMessage("邮箱已被注册",$("#email"));
                }
                else if(result==="402"){
                    showMessage("手机号已注册",$("#phone"));
                }else {
                    showMessage("注册OpenStack服务失败，可能是服务器集群down机了",$("#register-button"));
                }
            }
        });
    });
    function checkRegister(username,password,email,phone) {
        var emailRegex = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
        if(!checkLength(username, "用户名", 5, 20)) {
            return false;
        }else if(!checkLength(password, "密码", 5, 20)) {
            return false;
        }else if(!checkLength(email, "邮箱", 5, 20)) {
            return false;
        }else if(!checkLength(phone, "手机电话", 11, 11)){
            return false;
        }else if(!checkRegexp(email, emailRegex, "邮箱输入不合法,eg. 16455525111@qq.com")){
            return false;
        }else return checkRegexp(password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9");
    }
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#000000">
    <h1>云计算管理系统</h1>
</div>
</body>
</html>